<template>
    <div class="content">
        <div class="category">
            <div :class="{'category__item':true, 'category__item--active':currentTab === item.tab}"
                 v-for="item in categories"
                 :key="item.name"
                 @click="()=>handleTabClick(item.tab)">{{ item.name }}</div>
        </div>
        <div class="product">
            <div class="product__item" v-for="(item) in list" :key="item._id">
                <img class="product__item__img" :src="item.imgUrl" alt="">
                <div class="product__item__detail">
                    <h4 class="product__item__title">{{ item.name }}</h4>
                    <p class="product__item__seals">月售{{item.sales}}件</p>
                    <p class="product__item__price">
                        <span class="product__item__yen">&yen;</span>{{ item.price }}
                        <span class="product__item__origin">&yen;{{ item.oldprice }}</span>
                    </p>
                </div>
                <div class="product__num">
                    <span
                        class="product__num__minus"
                        @click="()=>{ changeCartItem(shopId, item._id, item, -1, shopName) }" >-</span>
                    {{ getProductCartCount(shopId, item._id)}}
                    <span
                        class="product__num__plus"
                        @click="()=>{ changeCartItem(shopId, item._id, item, 1, shopName) }" >+</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {reactive, ref, toRefs, watchEffect} from "vue";
import {useRoute} from "vue-router";
import {get} from "@/utils/request"
import {useStore} from "vuex";
import {useCommonCartEffect} from "@/views/Shop/commonCartEffect";

const categories = [
    {name:'全部商品', tab:'all'},
    {name:'秒杀', tab:'seckill'},
    {name:'新鲜水果', tab:'fruit'}
]

//与tab切换相关的逻辑
const useTabEffect = () => {
    const currentTab = ref( categories[0].tab )
    const handleTabClick = (tab) =>{
        currentTab.value = tab
    }
    return {currentTab, handleTabClick}
}

//列表内容获取相关逻辑
const useCurrentListEffect = (currentTab, shopId) => {
    const content = reactive({ list: [] })

    const getContentData = async () => {
        const result = await get(`/api/shop/${shopId}/products`, {tab:currentTab.value})
        if (result?.errno === 0 && result?.data?.length)
            content.list = result.data
    }
    watchEffect(() => { getContentData() })

    const { list }= toRefs(content);
    return { list }
}

const useCartEffect = () => {
    const store = useStore()
    const { changeCartItemInfo, cartList} = useCommonCartEffect()

    const changeShopName = (shopId, shopName) =>{
        store.commit('changeShopName', { shopId, shopName })
    }
    const changeCartItem = (shopId, productList, item, num, shopName) => {
        changeCartItemInfo(shopId, productList, item, num)
        changeShopName(shopId, shopName)
    }
    const getProductCartCount = (shopId, productId) =>{
        return cartList?.[shopId]?.productList?.[productId]?.count || 0
    }
    return {changeCartItem, cartList, getProductCartCount}
}

export default {
    name: "content",
    props: ['shopName'],
    setup(){
        const route = useRoute()
        const shopId = route.params.id
        const { currentTab, handleTabClick } = useTabEffect();
        const { list } = useCurrentListEffect(currentTab, shopId)
        const {changeCartItem, cartList, getProductCartCount} = useCartEffect()
        return { list, categories, currentTab, handleTabClick, shopId, cartList, changeCartItem, getProductCartCount}
    }
}
</script>

<style scoped lang="scss">
@import '../../style/viriables';
@import "../../style/mixins";
.content{
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 1.5rem;
    bottom: .5rem;
}
.category{
    height: 100%;
    overflow-y: scroll;
    width: .76rem;
    background-color: $search_bgcolor;
    &__item{
        line-height: .4rem;
        text-align: center;
        font-size: .14rem;
        color: $content-fontcolor;
        &--active{
            background-color: $bgcolor;
        }
    }
}
.product{
    flex: 1;
    overflow-y: scroll;
    &__item{
        position: relative;
        display: flex;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgcolor;
        &__detail{
            overflow: hidden;
        }
        &__img{
            width: .68rem;
            height: .68rem;
            margin-right: .16rem;
        }
        &__title{
            font-size: 14px;
            line-height: .2rem;
            color: $content-fontcolor;
            margin: 0;
            @include ellipse()
        }
        &__sales{
            margin: .06rem 0;
            font-size: .12rem;
            line-height: .16rem;
        }
        &__price{
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $highlight-fontcolor;
        }
        &__yen{
            font-size: .12rem;
        }
        &__origin{
            line-height: .2rem;
            font-size: .12rem;
            color: #999;
            text-decoration: line-through;
            margin-left: .06rem;
        }

        .product__num{
            position: absolute;
            right: .12rem;
            bottom: .18rem;
            text-align: center;
            &__minus, &__plus{
                width: .2rem;
                height: .2rem;
                line-height: .16rem;
                display: inline-block;
                border-radius: 50%;
                font-size: .2rem;
                text-align: center;
            }
            &__minus{
                border: .01rem solid #666;
                color: #666;
                margin-right: .05rem;
            }
            &__plus{
                background-color: #0091ff;
                color: $bgcolor;
                border: .01rem solid #0091ff;
                margin-left: .05rem;
            }
        }
    }
}
</style>
